<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>一课表设置中心</title>
    <link href="./images/icon.ico" rel="icon" />
</head>
<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="./jquery.cookie.min.js"></script>
<script src="./HwAuth.js"></script>

<body style="background-color: #F0F0F0;">
    <div id="app" style="display: flex;width: 100%;height: 100%;flex-direction: column;padding: 8px;">
        <div style="align-items: center;width: 100%;flex-shrink: 0;">
            <!-- 返回按钮 -->
            <div style="width: fit-content;align-items: center;" class="clickEffect" v-on:click="back">
                <svg width="24" height="24" viewBox="0 0 24 24" version="1.1">
                    <path
                        d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z"
                        fill="black" />
                </svg>
                <p style="font-size: 20px;margin-left: 8px;letter-spacing: 4px;">返回</p>
            </div>
            <div style="flex-grow: 1;"></div>
            <div style="padding: 6px 16px;background-color: red;color: white;border-radius: 30px;font-size: 14px;align-items: center;justify-content: center;"
                class="clickEffect" v-on:click="openPlatformChooseDialog">从云备份中获取设置数据</div>
        </div>

        <div style="flex-grow: 1;width: 100%;margin-top: 8px;overflow: hidden;">
            <div style="flex-direction: column;width: calc(30% - 4px);">
                <div style="align-items: center;" class="setting_item">
                    <p>显示周末</p>
                    <input type="checkbox" v-on:change="showWeekendChange" v-bind:checked="showWeekend" />
                </div>
                <div style="align-items: center;" class="setting_item">
                    <p>显示背景</p>
                    <input type="checkbox" v-on:change="backgroundChange" v-bind:checked="showBackgroungImg" />
                    <input type="file" v-on:input="selectImage(event)" style="display: none;" accept="image/*" id="imageSelect"/>
                </div>
                <div style="align-items: center;" class="setting_item">
                    <p>文本颜色</p>
                    <div style="width: 50px;border-radius: 30px;height: 24px;border: 1px solid black"
                    v-bind:style="{'background-color': textColor}" onclick="this.nextElementSibling.click()" class="clickEffect"></div> 
                    <input type="color" v-bind:value="textColor" style="width: 0;height: 0;padding: 0;visibility: hidden;" v-on:input="textColorChange(event)" v-on:change="saveTextColor"/>
                </div>
            </div>

            <div style="width: 8px;flex-shrink: 0;"></div>

            <div
                style="flex-direction: column;width: calc(70% - 4px);border-radius: 8px;background-color: #FFFFFF;padding: 16px;overflow: hidden;">
                <p style="font-size: 20px;margin-bottom: 8px;">时间表设置</p>
                <div style="width: 100%;align-items: center;">
                    <div
                        style="flex-grow: 1;border-radius: 30px;background-color: #80808018;align-items: center;justify-content: center;">
                        <select v-on:change="tableChange($event.currentTarget)" required>
                            <option v-for="timeTableObj in timeTables" v-bind:value="timeTableObj.uid"
                                v-bind:selected="timeTableObj.uid == uid">{{timeTableObj.name}}</option>
                        </select>
                    </div>
                    <div class="checkbox clickEffect" v-bind:checked="uid == defaultUid" v-on:click="useDefault"></div>
                    <p style="font-size: 16px;">默认时间表</p>
                </div>
                <div style="flex-direction: column;width: 100%;overflow-x: none;overflow-y: auto;margin-top: 8px;">
                    <div style="width: 100%;flex-direction: column;align-items: flex-end;"
                        v-for="(item, i) in timeCombine.combine">
                        <div
                            style="border-radius: 16px;background-color: #80808018;padding: 8px 16px;flex-direction: column;margin: 4px 0;width: 100%;">
                            <div style="width: 100%;flex-direction: column;" v-for="(idx, ii) in item">
                                <div style="align-items: stretch;">
                                    <div style="align-items: center;flex-grow: 1;">
                                        <svg width="24" height="24" style="flex-shrink: 0;margin-right: 14px"
                                            class="clickEffect" v-on:click="deleteTime"
                                            v-if="idx == timeTable.getBlockLength() && idx != 1">
                                            <path fill="black"
                                                d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" />
                                        </svg>
                                        <div v-else style="width: 24px; flex-shrink: 0;margin-right: 14px;"></div>
                                        <p>名称：</p>
                                        <p style="flex-grow: 1;overflow: hidden;border-bottom: 1px black solid;padding: 4px 8px;text-align: center;"
                                            class="clickEffect" v-on:click="clickName(idx)">{{timeShowing[idx-1].name}}
                                        </p>
                                        <p style="margin-left: 16px;">上课时间：</p>
                                        <p style="flex-shrink: 0;width: 100px;border-bottom: 1px black solid;padding: 4px 8px;text-align: center;"
                                            class="clickEffect" v-on:click="clickTime(idx)">{{timeShowing[idx-1].time}}
                                        </p>
                                        <p style="margin-left: 16px;">持续时间：</p>
                                        <p style="flex-shrink: 0;width: 100px;border-bottom: 1px black solid;padding: 4px 8px;text-align: center;"
                                            class="clickEffect" v-on:click="clickLast(idx)">{{timeShowing[idx-1].last}}
                                        </p>
                                    </div>
                                    <div
                                        style="width: 80px;flex-shrink: 0;margin-left: 16px;align-items: center;justify-content: center;">
                                        <div v-if="item.length == 1"></div>
                                        <svg width="48" height="48" v-else-if="ii == 0">
                                            <path d="M0,24 L24,24 L24,48" stroke="black" stroke-width="1.5" fill="none">
                                            </path>
                                        </svg>
                                        <svg width="48" height="48" v-else-if="ii == item.length - 1">
                                            <path d="M0,24 L24,24 L24,0" stroke="black" stroke-width="1.5" fill="none">
                                            </path>
                                        </svg>
                                        <svg width="48" height="48" v-else>
                                            <path d="M24,0 L24,48" stroke="black" stroke-width="1.5" fill="none"></path>
                                        </svg>
                                    </div>
                                </div>
                                <div style="width: 100%;justify-content: flex-end;height: 40px;"
                                    v-if="ii != item.length - 1">
                                    <div style="width: 80px;flex-shrink: 0;align-items: center;justify-content: center;margin-left: 16px;"
                                        class="clickEffect" v-on:click="unlock(i, ii)">
                                        <svg style="width: 30px;aspect-ratio: 1;">
                                            <path
                                                d="M16.447592,14.0940386 C16.8470122,14.0940386 17.1735072,14.4062686 17.1963188,14.7999704 L17.197592,14.8440386 L17.197592,18.5940386 C17.197592,21.3554623 14.9590157,23.5940386 12.197592,23.5940386 C9.46493306,23.5940386 7.24428571,21.4018564 7.19831874,18.6801609 L7.19759198,14.8440386 C7.19759198,14.429825 7.53337841,14.0940386 7.94759198,14.0940386 C8.3470122,14.0940386 8.6735072,14.4062686 8.6963188,14.7999704 L8.69759198,14.8440386 L8.69759198,18.5940386 C8.69759198,20.5270352 10.2645954,22.0940386 12.197592,22.0940386 C14.104467,22.0940386 15.6551737,20.5691005 15.6967365,18.6721998 L15.697592,14.8440386 C15.697592,14.429825 16.0333784,14.0940386 16.447592,14.0940386 Z M12.197592,6.84403858 C12.6118055,6.84403858 12.947592,7.17982502 12.947592,7.59403858 L12.947592,16.0940386 C12.947592,16.5082521 12.6118055,16.8440386 12.197592,16.8440386 C11.7833784,16.8440386 11.447592,16.5082521 11.447592,16.0940386 L11.447592,7.59403858 C11.447592,7.17982502 11.7833784,6.84403858 12.197592,6.84403858 Z M12.197592,0.0940385849 C14.9302509,0.0940385849 17.1508982,2.28622073 17.1968652,5.00791623 L17.197592,8.84403858 C17.197592,9.25825215 16.8618055,9.59403858 16.447592,9.59403858 C16.0481718,9.59403858 15.7216768,9.28180859 15.6988651,8.88810678 L15.697592,8.84403858 L15.697592,5.09403858 C15.697592,3.16104196 14.1305886,1.59403858 12.197592,1.59403858 C10.2907169,1.59403858 8.74001025,3.11897668 8.69844749,5.01587733 L8.69759198,5.09403858 L8.69759198,8.84403858 C8.69759198,9.25825215 8.36180554,9.59403858 7.94759198,9.59403858 C7.54817175,9.59403858 7.22167676,9.28180859 7.19886515,8.88810678 L7.19759198,8.84403858 L7.19759198,5.09403858 C7.19759198,2.33261484 9.43616823,0.0940385849 12.197592,0.0940385849 Z"
                                                fill="black"
                                                transform="translate(12.197592, 11.844039) rotate(-315.000000) translate(-12.197592, -11.844039)" />
                                            <line x1="5" y1="5" x2="19" y2="19" stroke="black" stroke-width="1.5"
                                                stroke-linecap="round" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 80px;justify-content: center;align-items: center;margin-right: 16px;">
                            <svg style="width: 30px;aspect-ratio: 1;margin-top: 8px"
                                v-if="i != timeCombine.combine.length - 1" class="clickEffect" v-on:click="lock(i)">
                                <path
                                    d="M16.447592,14.0940386 C16.8470122,14.0940386 17.1735072,14.4062686 17.1963188,14.7999704 L17.197592,14.8440386 L17.197592,18.5940386 C17.197592,21.3554623 14.9590157,23.5940386 12.197592,23.5940386 C9.46493306,23.5940386 7.24428571,21.4018564 7.19831874,18.6801609 L7.19759198,14.8440386 C7.19759198,14.429825 7.53337841,14.0940386 7.94759198,14.0940386 C8.3470122,14.0940386 8.6735072,14.4062686 8.6963188,14.7999704 L8.69759198,14.8440386 L8.69759198,18.5940386 C8.69759198,20.5270352 10.2645954,22.0940386 12.197592,22.0940386 C14.104467,22.0940386 15.6551737,20.5691005 15.6967365,18.6721998 L15.697592,14.8440386 C15.697592,14.429825 16.0333784,14.0940386 16.447592,14.0940386 Z M12.197592,6.84403858 C12.6118055,6.84403858 12.947592,7.17982502 12.947592,7.59403858 L12.947592,16.0940386 C12.947592,16.5082521 12.6118055,16.8440386 12.197592,16.8440386 C11.7833784,16.8440386 11.447592,16.5082521 11.447592,16.0940386 L11.447592,7.59403858 C11.447592,7.17982502 11.7833784,6.84403858 12.197592,6.84403858 Z M12.197592,0.0940385849 C14.9302509,0.0940385849 17.1508982,2.28622073 17.1968652,5.00791623 L17.197592,8.84403858 C17.197592,9.25825215 16.8618055,9.59403858 16.447592,9.59403858 C16.0481718,9.59403858 15.7216768,9.28180859 15.6988651,8.88810678 L15.697592,8.84403858 L15.697592,5.09403858 C15.697592,3.16104196 14.1305886,1.59403858 12.197592,1.59403858 C10.2907169,1.59403858 8.74001025,3.11897668 8.69844749,5.01587733 L8.69759198,5.09403858 L8.69759198,8.84403858 C8.69759198,9.25825215 8.36180554,9.59403858 7.94759198,9.59403858 C7.54817175,9.59403858 7.22167676,9.28180859 7.19886515,8.88810678 L7.19759198,8.84403858 L7.19759198,5.09403858 C7.19759198,2.33261484 9.43616823,0.0940385849 12.197592,0.0940385849 Z"
                                    fill="black"
                                    transform="translate(12.197592, 11.844039) rotate(-315.000000) translate(-12.197592, -11.844039)" />
                            </svg>
                        </div>

                    </div>
                    
                </div>
                <p class="clickEffect"
                    style="padding: 12px;border-radius: 30px;outline: none;background-color: #0066ff;color: white;border: none;text-align: center;margin-top: 16px;"
                    v-on:click="addTime">
                    添加节次</p>
            </div>
        </div>

        <dialog id="PlatformChooseDialog"
            style="background-color: #FFFFFF;outline: none;border: none;padding: 16px;border-radius: 16px;box-shadow: 4px 4px 10px 0 #00000030;">
            <div style="width: 500px;max-width: 300px;height: 200px;flex-direction: column;">
                <p style="font-size: 16px;width: 100%;margin-bottom: 8px;flex-shrink: 0;text-align: center;">请选择云空间数据归属
                </p>
                <div style="flex-grow: 1;width: 100%;flex-direction: column;overflow-y: auto;overflow-x: hidden;">
                    <div class="clickEffect"
                        style="width: 100%;padding: 12px 16px;align-items: center;justify-content: center;margin: 4px 0;background-color: #80808020;border-radius: 30px;font-size: 12px;"
                        v-on:click="choosePlatform(true)">一课表应用(应用市场)
                    </div>
                    <div class="clickEffect"
                        style="width: 100%;padding: 12px 16px;align-items: center;justify-content: center;margin: 4px 0;background-color: #80808020;border-radius: 30px;font-size: 12px;"
                        v-on:click="choosePlatform(false)">一课表服务(服务中心/负一屏)
                    </div>
                </div>
                <div class="clickEffect"
                    style="border-radius: 30px;background-color: #dd0000;color: white;padding: 8px 16px;border: none;text-align: center;width: 100%;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;"
                    v-on:click="PlatformChooseDialog_cancel">取消</div>
            </div>
        </dialog>

        <dialog id="InputDialog"
            style="background-color: #FFFFFF;outline: none;border: none;padding: 16px;border-radius: 16px;box-shadow: 4px 4px 10px 0 #00000030;">
            <div style="width: 500px;max-width: 300px;padding: 16px;flex-direction: column;">
                <p style="font-size: 16px;width: 100%;margin-bottom: 8px;flex-shrink: 0;text-align: center;">
                    {{inputDialog_title}}
                </p>
                <input style="width: 100%;flex-shrink: 0;width: 100%;text-align: center;font-size: 16px;"
                    placeholder="请输入" v-bind:value="inputDialog_value" v-on:change="InputDialog_change" />
                <div class="clickEffect"
                    style="border-radius: 30px;background-color: #0066ff;color: white;padding: 8px 16px;border: none;text-align: center;width: 100%;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;margin-top: 8px;"
                    v-on:click="InputDialog_confirm">确定</div>
                <div class="clickEffect"
                    style="border-radius: 30px;background-color: #dd0000;color: white;padding: 8px 16px;border: none;text-align: center;width: 100%;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;margin-top: 8px;"
                    v-on:click="InputDialog_cancel">取消</div>
            </div>
        </dialog>
    </div>
</body>
<script>
    var platFormIsApp = true
</script>
<script type="module">
    import * as utils from './utils.js'
    import { TimeTable } from './TimeTable.js'
    import { TimeCombine } from './TimeCombine.js'
    var set_storage = utils.getStorage({
        priority: ['indexeddb'],
        name: 'Set'
    })
    var time_storage = utils.getStorage({
        priority: ['indexeddb'],
        name: 'Time'
    })

    var inputDialog_callback = null

    var vm = new Vue({
        el: '#app',
        data: {
            showWeekend: true,
            showBackgroungImg: false,
            textColor: '#000000',

            timeTable: {},
            timeShowing: [],
            timeCombine: { combine: [] },
            inputDialog_title: '请输入',
            inputDialog_value: '',
            timeTables: [],
            uid: null,
            defaultUid: null
        },
        async created() {
            let _showWeekend = (await set_storage.get('showWeekend')).showWeekend
            this.showWeekend = _showWeekend != undefined ? _showWeekend : true
            let img = window.localStorage.getItem('backgroundImg')
            this.showBackgroungImg = img != null
            let tc = window.localStorage.getItem('textColor')
            this.textColor = tc == null ? '#000000' : tc

            let TimeTables = await time_storage.keys()

            let defaultUid = await set_storage.get('nowTimeTableUID').nowTimeTableUID
            if (TimeTables.length == 0) {
                let defaultTime = JSON.stringify({ timeTable: TimeTable.defaultTime().convertToComplex().toSave(), timeCombine: TimeCombine.defaultTimeCombine().combine })
                let uid = String(new Date().getTime())
                await time_storage.set(uid, defaultTime)
                await set_storage.set('timeTable', JSON.stringify([{ uid: uid, name: '时间表1' }]))
                TimeTables = [uid]
            }
            if (defaultUid == undefined || TimeTables.indexOf(defaultUid) == -1) {
                defaultUid = TimeTables[0]
            }

            let _timeTables = (await set_storage.get('timeTable')).timeTable
            this.timeTables = _timeTables != undefined ? JSON.parse(_timeTables) : []

            let [timeTable, timeCombine] = (await TimeTable.loadTimeTable(defaultUid))
            if (timeTable.type == 0) {
                timeTable = timeTable.convertToComplex()
            }
            this.defaultUid = defaultUid
            this.uid = defaultUid

            timeCombine = new TimeCombine(timeCombine)
            timeCombine.fixTimeCombine(timeTable.getBlockLength() + 1)
            this.timeCombine = timeCombine
            this.timeTable = timeTable
            let ts = timeTable.buildTimeShowing()
            this.timeShowing = ts
            this.save()
        },
        methods: {
            back() {
                window.location.href = './'
            },

            showWeekendChange(e) {
                let checked = e.currentTarget.checked
                this.showWeekend = checked
                set_storage.set('showWeekend', checked)
            },

            openPlatformChooseDialog() {
                document.getElementById('PlatformChooseDialog').showModal()
            },
            choosePlatform(isApp) {
                document.getElementById('PlatformChooseDialog').close()
                platFormIsApp = isApp
                checkCloud(isApp, res => {
                    if (res.code == 0) {
                        Hw_getFilesFromCloud(isApp, 'Data', items => {
                            if (items.length == 0) {
                                alert('没有备份过设置数据')
                            } else {
                                Hw_loadFile(isApp, items[0].contentDownloadLink, ({ code, data }) => {
                                    if (code == 0) {
                                        let setting = JSON.parse(base64Decode(data))
                                        let Storage = setting.Storage
                                        let TimeTableStorage = setting.TimeTable
                                        let TimeCombineStorage = setting.TimeCombine
                                        let wait = []

                                        time_storage.clear().then(() => {
                                            wait.push(set_storage.set('showWeekend', Storage.pageSetting.hideWeekend))

                                            Object.entries(TimeTableStorage).forEach(([timeTableId, timeTable]) => {
                                                let timeCombine = TimeCombineStorage ? TimeCombineStorage[timeTableId] : '[]'
                                                wait.push(time_storage.set(timeTableId, JSON.stringify({
                                                    timeTable: JSON.parse(timeTable),
                                                    timeCombine: JSON.parse(timeCombine)
                                                })))
                                            })

                                            wait.push(set_storage.set('nowTimeTableUID', Storage.nowTimeTableUID))
                                            wait.push(set_storage.set('timeTable', Storage.timeTable))

                                            Promise.all(wait).then(() => {
                                                alert('获取完成')
                                                window.location.reload()
                                            })
                                        })
                                    } else {
                                        alert('获取设置数据失败，请重试')
                                    }
                                })
                            }
                        })
                    }
                }, false)
            },
            PlatformChooseDialog_cancel() {
                document.getElementById('PlatformChooseDialog').close()
            },
            lock(i) {
                this.timeCombine.lock(i + 1)
                this.save()
            },
            unlock(bi, i) {
                this.timeCombine.unlock(bi, i + 1)
                this.save()
            },
            save() {
                time_storage.set(this.uid, JSON.stringify({ timeTable: this.timeTable.toSave(), timeCombine: this.timeCombine.combine }))
            },
            openInputDialog(title, value, callback) {
                this.inputDialog_title = title
                this.inputDialog_value = value
                inputDialog_callback = callback
                document.getElementById('InputDialog').showModal()
            },
            InputDialog_change(e) {
                this.inputDialog_value = e.currentTarget.value
            },
            InputDialog_confirm() {
                document.getElementById('InputDialog').close()
                if (inputDialog_callback != null) inputDialog_callback()
            },
            InputDialog_cancel() {
                document.getElementById('InputDialog').close()
            },
            clickName(i) {
                this.openInputDialog('请输入节次名称', this.timeTable.getName(i), () => {
                    console.log(i, this.inputDialog_value)
                    this.timeTable.complexName[i - 1] = this.inputDialog_value
                    this.timeShowing = this.timeTable.buildTimeShowing()
                    this.save()
                })
            },
            clickTime(i) {
                this.openInputDialog('请输入开始时间', this.timeTable.getStart(i), () => {
                    console.log(i, this.inputDialog_value)
                    if (/[0-9]{2}:[0-9]{2}/.test(this.inputDialog_value)) {
                        this.timeTable.change(this.inputDialog_value, i)
                        this.timeShowing = this.timeTable.buildTimeShowing()
                        this.save()
                    } else {
                        alert('时间格式错误，请按照xx:xx格式输入')
                    }
                })
            },
            clickLast(i) {
                this.openInputDialog('请输入持续时间', this.timeTable.getLast(i), () => {
                    console.log(i, this.inputDialog_value)
                    if (/[0-9]{2}:[0-9]{2}/.test(this.inputDialog_value)) {
                        this.timeTable.changeLast(this.inputDialog_value, i)
                        this.timeShowing = this.timeTable.buildTimeShowing()
                        this.save()
                    } else {
                        alert('时间格式错误，请按照xx:xx格式输入')
                    }
                })
            },
            async tableChange(e) {
                let value = e[e.selectedIndex].value
                console.log(value)
                let [timeTable, timeCombine] = (await TimeTable.loadTimeTable(value))
                if (timeTable.type == 0) {
                    timeTable = timeTable.convertToComplex()
                }
                this.uid = value

                timeCombine = new TimeCombine(timeCombine)
                timeCombine.fixTimeCombine(timeTable.getBlockLength() + 1)
                this.timeCombine = timeCombine
                this.timeTable = timeTable
                let ts = timeTable.buildTimeShowing()
                this.timeShowing = ts
                this.save()
            },
            useDefault() {
                if (this.defaultUid == this.uid) return;
                set_storage.set('nowTimeTableUID', this.uid).then(() => {
                    this.defaultUid = this.uid
                })
            },
            deleteTime() {
                this.timeTable.remove(this.timeTable.getBlockLength() - 1)
                this.timeCombine.fixTimeCombine(this.timeTable.getBlockLength() + 1)
                this.save()
            },
            addTime() {
                let t = this.timeTable.getStartV(this.timeTable.getBlockLength() + 1)
                let l = this.timeTable.getLastV(this.timeTable.getBlockLength() + 1)
                let nt = utils.num2time_float(t + l + 0.1667)
                let nl = utils.num2time_float(l)
                if (t + l >= 24) {
                    alert('再增加将超过24点')
                    return;
                }
                if (t + l + l > 24) {
                    nt = utils.num2time_float(t + l)
                    nl = utils.num2time_float(24 - t - l)
                }
                this.timeTable.add(nt, nl)
                this.timeShowing = this.timeTable.buildTimeShowing()
                this.timeCombine.fixTimeCombine(this.timeTable.getBlockLength() + 1)
                this.save()
            },
            backgroundChange(e) {
                let checked = e.currentTarget.checked
                if (checked) {
                    let useUrl = confirm('是否使用网络图片（否则使用本地图片）？')
                    let url = ''
                    if (useUrl) {
                        url = prompt('输入图片url')
                        if (url == null || url == '') {
                            e.currentTarget.setAttribute('checked', 'false')
                            return;
                        }
                        this.confirmImage(url)
                    } else {
                        document.getElementById('imageSelect').click()
                    }
                } else {
                    window.localStorage.removeItem('backgroundImg')
                    this.showBackgroungImg = false
                }
            },
            selectImage(e) {
                let files = e.currentTarget.files
                if (files.length == 0) {
                    e.currentTarget.previousElementSibling.setAttribute('checked', 'false')
                } else {
                    let reader = new FileReader()
                    reader.readAsBinaryString(files[0])
                    reader.onload = () => {
                        let buffer = reader.result
                        let url = "data:" + files[0].type + ";base64," + btoa(buffer);
                        this.confirmImage(url)
                    }
                }
            },
            confirmImage(url) {
                this.showBackgroungImg = true
                console.log(url)
                window.localStorage.setItem('backgroundImg', url)
            },
            textColorChange(e) {
                this.textColor = e.currentTarget.value
            },
            saveTextColor(e) {
                this.textColor = e.currentTarget.value
                window.localStorage.setItem('textColor', this.textColor)
            }
        }
    })
</script>

<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    div,
    button {
        display: flex;
        box-sizing: border-box;
        user-select: none;
    }

    p {
        padding: 0;
        margin: 0;
    }

    input {
        outline: none;
        border: none;
        background-color: #80808018;
        border-radius: 30px;
        padding: 8px;
    }

    select {
        outline: none;
        border: none;
        padding: 8px 24px;
        text-align: center;
        background: none;
    }

    .checkbox {
        border-radius: 30px;
        width: 18px;
        aspect-ratio: 1;
        background-image: url('checkbox_unchecked.svg');
        background-size: 18px;
        margin: 0 8px;
    }

    .checkbox[checked] {
        background-image: url('checkbox_checked.svg');
    }

    .setting_item {
        padding: 8px 16px;
        border-radius: 30px;
        background-color: #FFFFFF;
        margin: 4px 0;
    }

    .setting_item>p {
        font-size: 16px;
        flex-grow: 1;
    }

    .setting_item>input[type=checkbox] {
        width: 48px;
        height: 24px;
        appearance: none;
        background-color: #E0E0E0;
        border-radius: 30px;
        position: relative;
        outline: none;
        transition: background-color .3s;
    }

    .setting_item>input[type=checkbox]::after {
        content: '';
        width: 18px;
        height: 18px;
        background-color: #FFFFFF;
        border-radius: 30px;
        position: absolute;
        left: 3px;
        top: 3px;
        box-shadow: 1px 1px 3px 0 #00000030;
        transition: left .3s, transform .3s;
    }

    .setting_item>input[type=checkbox]:active::after {
        transform: scale(0.8);
    }

    .setting_item>input[type=checkbox]:checked {
        background-color: #0066ff;
    }

    .setting_item>input[type=checkbox]:checked::after {
        left: 28px;
    }

    .clickEffect {
        transition: transform 300ms;
    }

    .clickEffect:active {
        transform: scale(0.9);
    }
</style>

</html>